<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="UTF-8">
		<script src="../../public/js/tmpl.js"></script>
		<script>
			var content = template('Phead_resource', {
				title: '个人资料'
			});
			document.write(content);
		</script>
	</head>
	<body class="wrap_bg personal_info">
		
		<header>
			<div class="padding10 ">
				<h1 class="color-white am-text-center">请填写个人资料</h1>
			</div>
		</header>
		
		<section class="cont_info">
			
		</section>
		
		<!--底部按钮-->
		<footer class="footer_nav">
			<p class="am-text-center padding10 active_bg color-white am-block bottom_btn">
				<span class="am-text-sm">确定保存</span>
			</p>
		</footer>
		
		
		<!--模态窗-->
		<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
		  	<div class="am-modal-dialog">
		    	<div class="am-modal-hd">输入信息</div>
	    		<div class="am-modal-bd">
	     		 	<input type="text" class="am-modal-prompt-input">
	    		</div>
			    <div class="am-modal-footer">
			       <span class="am-modal-btn" data-am-modal-cancel>取消</span>
			       <span class="am-modal-btn" data-am-modal-confirm>提交</span>
			    </div>
		  	</div>
		</div>
		
		<script>
			var content = template('progress_status', {});
			document.write(content);
		</script>
		
		<script>
			var content = template('Pfoot_resource', {});
			document.write(content);
		</script>
		
		<script id="data_info" type="text/html">
			
			<ul class="ul_box am-text-sm bgs0 marginb10">
				<li class="li_item padding-v10 am-cf">
					<span class="am-u-sm-3 color-white">绑定手机号</span>
					<text class="am-u-sm-9 color-white value am-text-right">12315095233</text>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-u-sm-2 color-white ">体重 </span>
					<div class="am-u-sm-10 am-text-right">
						<span class="color-white"><span class="value">60</span>kg</span>
						<i class="am-icon-angle-right am-cion-fw color-grey"></i>
					</div>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-g">
					<span class="am-u-sm-2 color-white ">身高</span>
					<div class="am-u-sm-10 am-text-right">
						<span class="color-white "><span class="value">175</span>cm</span>
						<i class="am-icon-angle-right am-cion-fw color-grey"></i>
					</div>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-g">
					<span class="am-u-sm-2 color-white ">年龄</span>
					<div class="am-u-sm-10 am-text-right">
						<span class="color-white padding0"><span class="value">24</span>岁</span>
						<i class="am-icon-angle-right am-cion-fw color-grey"></i>
					</div>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-g">
					<span class="am-u-sm-3 color-white">bmi指数</span>
					<div class="am-u-sm-9 am-text-right">
						<span class="color-white ">87</span>
					</div>
				</li>
			</ul>
			
		</script>
		
		<script type="text/javascript">
		
			(function($, arttmpl){
			
				var info = {
					name:'燃脂搏击',
					date_time:'9月18日 11:15-12:25',
					address:'杭州市上城区建国路228号钱江时代大厦对面莲花超市旁杭州市第二人民医院',
					numb_Of_personels:[
						{num:'1',price:'69'},
						{num:'2',price:'138'},
						{num:'3',price:'207'}
					],
					total_price:'69',
					card_isOPen:false,
					discount_price:'69',
					numOf_cashCoupon:0,
					still_pay:'69',
					tip:'开始时间前6个小时前取消预约，住房金额退款；开始时间前6个小时后取消预约，不支持退款。'
				}
			
				var drawInfo = function(data){
					var d = {
						info:data
					};
					
					var content =arttmpl('data_info', d);
					$('.cont_info').html(content);
					
					
					/*绑定事件*/
					var btns = $('.cont_info').find('.btnState_group button');
					
					btns.click(function(){
						
						var i = btns.index($(this))+1;
						var price = $(this).attr('data-price');
						var $price = $('.cont_info').find('.total_price');
						
						$(this).addClass('on').siblings('button').removeClass('on');
						
						$price.html(price);
						
					});
				}
				
				/*成功回调*/
				var successcallback_Info = function(res){
					drawInfo(res)
				}
				
				/*失败回调*/
				var errorcallback = function(statuscode, statusmsg) {
					console.log(statuscode + "  " + statusmsg);
				};
				/*失败回调*/
				var faildcallback = function(xhr, errtype, errthow) {
					console.log(xhr.readyState + "  " + xhr.status + "  " + xhr.statusText);
				};
				
				/*请求数据*/
				var getInfo = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', info, sucessCallback, errorcallback, faildcallback);
				}
				
				var init = function(){
					getInfo('op', successcallback_Info, errorcallback, faildcallback)
					var $modal = $('#my-modal-loading');
					$modal.hide();
				}
				
				init();
			
			})(jQuery, template);
		
		
			$(function() {
			  $('.li_item').on('click', function() {
			    $('#my-prompt').modal({
			      relatedTarget: this,
			      onConfirm: function(e) {
//			        alert('你输入的是：' + e.data || '')
			      },
			      onCancel: function(e) {
//			        alert('不想说!');
			      }
			    });
			  });
			});	
		
		</script>
	</body>
</html>
